<template>
  <div class="rankingBox board-border">
    <div class="barBox">
      <NormalBar :barData="timeBarData"></NormalBar>
    </div>
    <div class="barBox">
      <NormalBar :barData="countBarData"></NormalBar>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import api from '@api/api';
import { getRoleId } from '@/unit/tool';
import NormalBar from '@components/echart/normalBar';
import '@assets/styles/publicStyle/index.less';

import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('board/');

function buildBarLists(barDataLists, isCount, titleStr, colorValue) {
  let dataLists = [];
  // let stateLists = [titleStr];
  let xAxisData = [];

  dataLists.push({
    option: {
      label: {
        show: false,
        color: '#FFFFFF',
        fontSize: 14,
        position: 'insideRight',
        formatter: (params) => {
          if (isCount) {
            return `${parseInt(params.value)}件`;
          } else {
            return `${parseInt(moment.duration(params.value * 1000).asHours())}时`;
          }
        },
        offset: [0, 2],
      },
    },
    data: barDataLists,
  });

  xAxisData = barDataLists.map((item, index) => {
    return item.name;
  });

  return {
    color: [colorValue],
    tooltip: {
      formatter: (params) => {
        if (isCount) {
          return `${params.marker}${params.name}&nbsp;${parseInt(params.value)}件`;
        } else {
          return `${params.marker}${params.name}&nbsp;${parseFloat(params.value / 60 / 60).toFixed(2)}时`;
        }
      },
    },
    title: {
      text: titleStr,
      left: '30',
      top: '24',
      textStyle: {
        fontSize: 18,
        fontWeight: 600,
        color: '#FFFFFF',
      },
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      bottom: '10',
    },
    // grid: { left: '60', top: '80', width: '1020' },
    grid: { left: '80', right: '30', top: '100' },
    xAxis: {
      // type: 'value',
      // axisLine: {
      //   show: false,
      // },
      // axisTick: {
      //   show: false,
      // },
      show: false,
    },
    yAxis: {
      type: 'category',
      inverse: true,
      boundaryGap: false,
      // y 轴线
      axisLine: {
        show: false,
      },
      // 分割线设置
      splitLine: {
        show: false,
      },
      //
      axisTick: {
        show: false,
      },
      //
      axisLabel: {
        textStyle: {
          color: '#708ACC',
          fontSize: 14,
        },
        // height: 70,
        // margin: -35,
        // rich: {},
      },
      // offset: 10,
      data: xAxisData,
    },

    lists: dataLists,
  };
}

export default {
  name: 'ranking',
  components: {
    NormalBar,
  },
  props: {},
  data() {
    return {
      userName: '',
      name: '',
      role: '',
      compId: '',
      countBarData: {},
      timeBarData: {},
    };
  },
  watch: {
    timeSwich: function(newValue, oldValue) {
      let { startTime, endTime } = newValue;
      this.boardGetProduceRank({ timeSort: 'desc', startTime, endTime }, 'timeBarData', false, '运行时间排名', '#0384DE');
      this.boardGetProduceRank({ countSort: 'desc', startTime, endTime }, 'countBarData', true, '产量排名', '#F45E23');
    },
  },
  computed: {
    ...mapState(['timeSwich']),
  },
  methods: {
    // 获取机床某时间段内的各个状态时间
    async boardGetProduceRank(parames, key, isCount, titleStr, colorValue) {
      const resData = await api.boardGetProduceRank({ companyId: this.compId, pageSize: 6, pageNum: 1, ...parames });

      let dataLists = [];
      let { rows, total } = resData;
      if (isCount) {
        dataLists = rows.map((item, index) => {
          return {
            name: item.macNumb.slice(0, 4),
            value: item.count,
          };
        });
      } else {
        dataLists = rows.map((item, index) => {
          return {
            name: item.macNumb.slice(0, 4),
            value: item.timeStamp,
          };
        });
      }

      this[key] = buildBarLists(dataLists, isCount, titleStr, colorValue);
    },
  },
  created() {},
  mounted() {
    getRoleId(this);
  },
};
</script>

<style scoped="scoped" lang="less">
@import './style.less';
</style>
